<template>
  <view class="express">
    <block v-if="hasTrack">
      <view class="head">
        <image
            class="truck"
            src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/icons/truck.png"
        ></image>
        <view class="status">
          <view class="company">{{ company }}</view>
          <view class="number">物流单号：{{ number }}</view>
          <view class="state">物流状态：{{ state }}</view>
        </view>
      </view>
      <view class="items">
        <view class="item" v-for="(item, index) in records" :key="index">
          <view class="time">{{ item.time }}</view>
          <view class="context">{{ item.context }}</view>
        </view>
      </view>
    </block>
    <block v-else>
      <view class="no-track">暂无物流状态，请稍后查询...</view>
    </block>
  </view>
</template>

<script>
import { trackOrder } from "api/orderApi";

export default {
  name: "express",
  data: () => ({
    hasTrack: false,
    company: '',
    number: '',
    state: '',
    records: []
  }),
  methods: {
    async loadTracks(id) {
      const response = await trackOrder(id)
      if (response.data.message === 'ok') {
        this.hasTrack = true
        this.company = response.data.com
        this.number = response.data.nu
        this.state = response.data.ischeck_
        this.records = response.data.data
      } else {
        this.hasTrack = false
      }
    }
  },
  onLoad(options) {
    this.loadTracks(options.id)
  }
}
</script>

<style lang="scss" scoped>
.express {
  .head {
    display: flex;
    background: #EEEEEE;
    padding: 30rpx;
    align-items: center;
    font-size: 24rpx;
    .truck {
      width: 120rpx;
      height: 80rpx;
      margin-right: 50rpx;
    }
    .status {
      .company {

      }
      .number {

      }
      .state {

      }
    }
  }
  .items {
    .item {
      display: flex;
      font-size: 24rpx;
      .time {
        width: 150rpx;
        text-align: center;
        padding: 30rpx 20rpx;
        border-right: 1px #EEEEEE solid;
      }
      .context {
        width: 500rpx;
        padding: 30rpx 20rpx;
      }
    }
  }
  .no-track {
    padding: 50rpx;
    text-align: center;
    font-size: 24rpx;
  }
}
</style>
